<template>
	<view class="content">
		<view class="avatar">
			<!-- <u-upload @afterRead="afterRead" name="avatar" multiple :maxCount="1">
				
			</u-upload> -->
			<u-avatar @click="handleUpload()" size="70" :src="userInfo.cover" default-url="/static/images/me/default_avatar.png"></u-avatar>
			<text class="tip">修改头像</text>
		</view>
		<view class="form">
			<u--form :rules="rules" :model="userInfo" labelPosition="top" labelWidth="80" :labelStyle="{color: '#ffffff', fontSize: '25rpx', paddingBottom: '10rpx'}">
				<u-form-item label="昵称" prop="nickname">
					<u--input class="input" v-model="userInfo.nickname" color="#ffffff"></u--input>
				</u-form-item>
				<u-form-item label="性别" @click="show = true">
					<u--input class="input" v-model="Sex[userInfo.sex]" color="#ffffff" disabledplaceholder="请选择性别" disabled suffixIcon="arrow-down" :suffixIconStyle="{color: '#ffffff'}"></u--input>
				</u-form-item>
				<u-form-item label="个性签名" >
					<u--textarea class="input" v-model="userInfo.desc" placeholder="请输入个性签名"  border="surround"  maxlength="50"></u--textarea>
				</u-form-item>
				<u-form-item>
					<button class="light-btn btn" @click="update">确定</button>
				</u-form-item>
			</u--form>
		</view>
		<u-action-sheet @close="show = false" :show="show" :safeAreaInsetBottom="true">
			<view class="sheet">
				<view @click="onClickSex(k)" class="cell" v-for="(v, k) in Sex" :key="k">{{v}}</view>
				<u-gap height="6" bgColor="#0a0a22"></u-gap>
				<view class="cell" @click="show = false">取消</view>
			</view>
		</u-action-sheet>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex'
	import {Sex} from '@/common/config/enums.js'
	export default {
		components: {
		},
		data() {
			return {
				show: false,
				Sex,
				userInfo: {
					nickname: null,
					sex: 0,
					desc: null,
					intro: null,
					cover: null
				},
				rules: {
					'userInfo.nickname': {
						type: 'string',
						required: true,
						message: '请填写昵称',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			...mapActions('user', ['updateUserAvatar', 'getUserInfo', 'updateUserInfo']),
			getInfo(){
				this.getUserInfo().then(res => {
					this.userInfo = {
						nickname: res.data.nickname,
						sex: res.data.sex,
						desc: res.data.description,
						intro: res.data.intro,
						cover: res.data.cover
					}
				})
			},
			onClickSex(v){
				this.userInfo.sex = v
				this.show = false
			},
			update(){
				if(!this.userInfo.nickname){
					uni.$u.toast('请输入昵称')
					return
				}
				this.updateUserInfo(this.userInfo).then(res => {
					uni.$u.toast('修改成功')
				})
			},
			handleUpload(){
				let _this = this
				uni.chooseImage({
					success: function (chooseImageRes) {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
						    title: '正在上传中...'
						});
						uni.$u.http.upload('/user/upload',
							{
								params: { type: 1 }, 
								name: 'file', 
								filePath: tempFilePaths[0]
							}
						).then(res => {
							let url = res.url
							_this.updateUserAvatar({cover: url}).then(res => {
								_this.userInfo.cover = url
							})
							uni.hideLoading()
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.avatar{
			width: 100%;
			height: 300rpx;
			background-color: #241e40;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.tip{
				padding: 20rpx 0;
				font-size: 24rpx;
			}
		}
		.form{
			padding: 20rpx 20rpx;
			.input{
				background-color: #232639 !important;
				border: 1rpx solid #666666 !important;
				color: #ffffff !important;
			}
		}
		.btn{
			margin-top: 20rpx;
		}
	}
	.sheet{
		background-color: #0a0a22;
		padding: 0;
		margin: 0;
		.cell{
			background-color: #232639;
			height: 80rpx;
			line-height: 80rpx;
			border: 1rpx solid #0a0a22;
		}
		.u-gap{
			background-color: #0a0a22;
		}
	}
	.uni-textarea-textarea{
		color: #ffffff !important;
	}
</style>
